<template>
    <view class="uni-shadow">
        <view style="position:relative">
            <text v-if="staffItem.showBtn" class="remove" @tap.stop="remove">移出</text>
            <view class="u-flex">
                <text class="u-m-r-28 font-bold">{{staffItem.xm}}</text>
                <text class="u-font-28 uni-dec-color">{{xb}}</text>
            </view>
            <view class="u-m-t-24 u-flex u-row-between">
                <view class="u-font-26">
                    <text class="u-m-r-16 uni-dec-color">证件号码:</text>
                    <text>{{staffItem.zjhm}}</text>
                </view>
                <text v-if="staffItem.showBtn" class="u-font-26 uni-dec-color" @tap.stop="isUnfold">
                    {{staffItem.isUnfold?'收起':'展开'}}
                </text>
            </view>
        </view>


        <!-- 展开信息 -->
        <view class="u-m-t-30" v-if="staffItem.isUnfold">
            <view class="u-font-26 u-flex">
                <text class="u-m-r-20 uni-dec-color">项目名称:</text>
                <text class="u-line-1">{{staffItem.gcmc}}</text>
            </view>
            <view class="u-m-t-20 u-font-26 u-flex">
                <text class="u-m-r-20 uni-dec-color" style="min-width:172rpx">施工企业名称:</text>
                <text class="u-line-1">{{staffItem.xmmc}}</text>
            </view>
            <view class="u-m-t-20 u-font-26 uni-dec-color u-flex">
                <text class="u-m-r-20">工资是否结清</text>
                <text>是</text> 
                <u-switch :disabled="!staffItem.showBtn?true:false" v-model="gzsfjq" size="13" ></u-switch>
                <text>否</text>
            </view>
            <view class="u-m-t-20 u-font-26 u-flex" v-if="gzsfjq">
                <text class="u-m-r-20 uni-dec-color">欠薪金额</text>
                <u--input class="input u-p-t-0 u-p-b-0" type="digit" fontSize="26rpx" :disabled="!staffItem.showBtn?true:false" 
                    v-model="staffItem.qxje" clearable>
                </u--input>元
            </view>
            <view class="u-m-t-20 u-font-26 u-flex u-col-top" v-if="gzsfjq">
                <text class="u-m-r-20 uni-dec-color">欠薪描述</text>
                <u--textarea class="input" v-model="staffItem.qxms" :disabled="!staffItem.showBtn?true:false" :autoHeight="true"></u--textarea>
            </view>
            <view v-if="staffItem.showBtn" class="u-m-t-20 u-flex u-row-right" @tap="qianxin">
                <u-button style="width:200rpx;margin:0" type="primary" text="确定" size="mini"></u-button>
            </view>
        </view>
    </view>
</template>

<script>
import tools from '@/tools/tools.js'
export default {
    name: 'memberItem',
    props: {
        staffItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data(){
        return{
            xb: '',
            gzsfjq: false,
        }
    },
    created(){
        this.init()
    },
    watch:{
        staffItem(){
            this.init()
        }
    },
    methods: {
        init(){
            this.gzsfjq = !this.staffItem.gzsfjq
            
            // 性别进行字典值转译
            if( this.staffItem.xb ){
                this.$request(this,this.$apis.CommonDictTran,{dictType:'xb',dictValue:this.staffItem.xb}).then(res=>{
                    if( typeof(res)=='string' ) {
                        this.xb = res
                    }else{
                        this.xb = ''
                    }
                })
            }
        },

        // 移出人员
        remove(){
            uni.showLoading({ title:'移出中' })
            const api = JSON.parse(JSON.stringify(this.$apis.leaveRemoveStaff))
            api.url += this.staffItem.id
            this.$request('this',api,{}).then(res=>{
                this.$emit('removeMember')
            })
        },

        // 展开收起
        isUnfold(){
            this.staffItem.isUnfold = !this.staffItem.isUnfold
        },

        // 欠薪
        qianxin(){
            const par = {
                gzsfjq: !this.gzsfjq,
                id: this.staffItem.id,
                qxje: null,
                qxms: '已结清'
            }
            if( this.gzsfjq ){ // 未结清
                if( this.staffItem.qxje && this.staffItem.qxms ){
                    par.qxje = this.staffItem.qxje,
                    par.qxms = this.staffItem.qxms
                }else{
                    uni.$u.toast('欠薪金额与欠薪描述为必填项')
                    return false
                }
            }
            this.$request('this',this.$apis.editStaffDetail,par).then(res=>{
                // console.log('修改人明细',res)
                this.$emit('removeMember')
            })
        }
    }
}
</script>

<style lang="scss">
    .remove{
        color: $uni-color-error;
        font-size: 26rpx;
        font-weight: bold;
        position: absolute;
        top: 0;
        right: 0;
    }
    .input{
        border: 1rpx solid #eee;
        /deep/.uni-textarea-textarea{
            font-size: 26rpx !important;
        }
    }
</style>